<template>
	<div class="top-nav">
		<!-- 顶部学院横幅图片（在背景色上居中显示） -->
		<div class="banner">
			<img src="@/assets/schoollogo.png" alt="学院横幅" class="banner-img" />
		</div>

		<!-- 下方导航栏 -->
		<el-menu mode="horizontal" :default-active="activeIndex" @select="handleSelect" background-color="transparent"
			text-color="#fff" active-text-color="#ffd04b" class="menu-bar">
			<el-menu-item index="1" @click="$router.push('/first')">{{ $t('menu.home') }}</el-menu-item>
			<el-menu-item index="2" @click="$router.push('/overview')">{{ $t('menu.overview') }}</el-menu-item>
			<el-menu-item index="3" @click="$router.push('/teacherTeam')">{{ $t('menu.teacherTeam') }}</el-menu-item>
			<el-menu-item index="4" @click="$router.push('/graduate')">{{ $t('menu.graduate') }}</el-menu-item>
			<el-menu-item index="5" @click="$router.push('/undergraduate')">{{ $t('menu.undergraduate') }}</el-menu-item>
			<el-menu-item index="6" @click="$router.push('/partyWork')">{{ $t('menu.partyWork') }}</el-menu-item>
			<el-menu-item index="7" @click="$router.push('/studentsWork')">{{ $t('menu.studentsWork') }}</el-menu-item>

		</el-menu>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				activeIndex: '1'
			}
		},
		
	}
</script>

<style scoped>
	.top-nav {
		width: 100%;
		/* 顶部整体背景色 */
		display: flex;
		flex-direction: column;

	}

	/* 图片区域 */
	.banner {
		background-color: #063f98;
		width: 100%;
		height: 60px;
		display: flex;
		align-items: flex-start;
		padding-left: 40px;
		/* 左边距 */
	}

	.banner-img {

		max-height: 100%;
		max-width: 80%;
		object-fit: contain;
	}

	/* 菜单栏区域 */
	.menu-bar {
		width: 100%;
		height: 40px;
		display: flex;
		font-size: 12px;
		color: #000;
		align-items: center;
		/*垂直居中*/
		justify-content: center;
		/* 菜单项居中 */
		background-color: transparent;

	}

	/* 移除 margin，改用 padding 控制间距 */
	::v-deep(.el-menu-item) {
		padding: 0 20px;
		font-size: 14px;
		line-height: 50px;
		/* 和菜单栏高度一致 */
		color: #000000;
	}

	::v-deep(.el-menu-item.is-active) {
		background-color: #063f98 !important;
		color: #ffffff;

	}
</style>
